<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>金服-打包管理</title>
  <script src="./messengers.js"></script>
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>

  <div id="wrap">
    <div id="app">
      <div class="flex justify-between">
        <div class="flex" id="env">
          <p class="tag active" data-type="test">测试</p>
          <p class="tag " data-type="build">生产</p>
        </div>
        <div class="flex">

          <p class="tag import" id="importConfig">导入项目</p>
          <p class="tag import" id="importCity">导入城市</p>
          <p class="tag build" id="startAllBuild">开始构建</p>
        </div>

      </div>
      <div class="flex " id="city">

      </div>
      <div class="content" id="project">
        <!-- <div class="flex justify-between row">
          <p class="item choose">
            <input type="checkbox" name="${item.path}" id="">
          </p>
          <p class="item name">${item.namenamenamename}</p>
          <p class="item terminal_item"><span class="pointer terminal">终端打开</span></p>

          <p class="item flex justify-between">
            <span class="pointer log">查看日志</span>
            <span class="pointer start">开始构建</span>
          </p>
        </div> -->

      </div>
    </div>
  </div>


  <div class="" id="logs">
    <p class="close pointer"><img src="./img/close.png" width="20" alt=""></p>
    <div class="warp">
    </div>
  </div>

  <script src="./js/jquery.min.js"></script>

  <script>
    let CITY = [];
    let PROJECT = [];


    $("#importConfig").on('click', function () {
      window.messengers.on('importConfig', { key: '' }, (res) => {
        window.location.reload();
      })
    })
    $("#importCity").on('click', function () {
      window.messengers.on('importCity', { key: '' }, (res) => {
        window.location.reload();

      })
    })

    function init() {

      $("#env .tag").on('click', function () {
        $(this).addClass('active').siblings().removeClass('active')
      })

      $("#city .tag").on('click', function () {
        
        $(this).addClass('active').siblings().removeClass('active')
        // if ($(this).hasClass('active')) {
        //   $(this).removeClass('active')
        // } else {
        //   $(this).addClass('active')
        // }
      })
      $('#project').on('click', '.log', function () {
        let path = PROJECT[Number($(this).data('index'))].path;
        window.messengers.on('openLogFile', { path }, (res) => {

          if (!res) {
            alert('日志不存在')
          }

        })
      });

    }
    /**
    * @author 伟健 / 张
    * @name 批量构建
    */
    $("#startAllBuild").on('click', function () {
      let data = {
        project: [],
        env: $("#env .active").data('type'),
        city: []
      }
      $('.checkbox').each(function (index, el) {
        if ($(this).is(':checked')) {
          data.project.push(PROJECT[Number($(this).data('index'))])
        }
      });


      $("#city .tag.active").each(function (index, el) {

        data.city.push(CITY[Number($(this).data('index'))])
      });

      if (!data.project.length || !data.city.length) {
        alert('请选择项目或者城市')
        return false
      }
      console.log(data);
      window.messengers.on('startAllBuild', { data }, (project) => {
        try {
          PROJECT = JSON.parse(project)
          renderProject(PROJECT)
        } catch (e) {
          console.log(e)
        }
      })
    })

    // 单个构建
    $('#project').on('click', '.start', function () {
      let index = $(this).data('index')
      console.log(index);

      let data = {
        project: [],
        env: $("#env .active").data('type'),
        city: []
      }
      $("#city .tag.active").each(function (index, el) {
        data.city.push(CITY[Number($(this).data('index'))])
      });

      data.project.push(PROJECT[Number(index)])

      if (!data.project.length || !data.city.length) {
        alert('请选择项目或者城市')
        return false
      }
      window.messengers.on('startBuild', { data }, (project) => {
        try {
          PROJECT = JSON.parse(project)
          renderProject(PROJECT)
        } catch (e) {
          console.log(e)
        }
      })

    });


    // 打开目录
    $('#project').on('click', '.openDir', function () {
      let path = PROJECT[Number($(this).data('index'))].path;
      window.messengers.on('openDir', { path }, (res) => {
        if (!res) {
          alert('路径不存在')
        }

      })
    })
    window.messengers.on('getConfig', { key: '' }, (res) => {
      if (res) {
        if (res.project) {
          try {
            PROJECT = JSON.parse(res.project)
            renderProject(PROJECT)
          } catch (e) {
            console.log(e)
          }
        }
        if (res.city) {
          try {
            CITY = JSON.parse(res.city)
            for (let i = 0; i < CITY.length; i++) {
              let item = CITY[i]
              $("#city").append(`
               <p class="tag min" data-index="${i}">${item.name}</p>
            `)
            }
          } catch (e) {
            console.log(e)
          }
        }
        init()
      }

    })

    // 监听构建事件
    window.messengers.$on('watchBuild', (event, res) => {
      try {
        PROJECT = JSON.parse(res.project)
        renderProject(PROJECT)
      } catch (e) {
        console.log(e)
      }
    })

    window.messengers.$on('getlog', (event, res) => {
      try {
        console.log('getlog', res);
      } catch (e) {
        console.log(e)
      }
    })

    // 

    function renderProject(PROJECT) {
      $("#project").html('');
      for (let i = 0; i < PROJECT.length; i++) {
        let item = PROJECT[i]
        $("#project").append(`
                <div class="flex justify-between row">
                <p class="item choose">
                  <input type="checkbox" class="checkbox" name="${item.path}"  data-index="${i}">
                </p>
                <p class="item status status${item.status || 0}">${['闲置', '构建中', '构建失败', '上传中', '解压中', '失败','版本标签'][item.status || 0]}</p>
                <p class="item name">${item.name}</p>
                <p class="item terminal_item"><span class="pointer openDir" data-index="${i}">打开文件</span></p>
           
                <p class="item flex justify-between">
                  <span class="pointer log" data-index="${i}">查看日志</span>
                  <span class="pointer start" data-index="${i}">构建</span>
                </p>
              </div>
               
            `)
      }
    }


  </script>

</body>

</html>